{extend name="public/layout" /}
{block name="content"}
<div class="container">
  <div class="col-md-8 offset-md-2">

    <div class="card">
      <div class="card-header">
        <h4>
          <i class="glyphicon glyphicon-edit"></i> 编辑个人资料
        </h4>
      </div>

      <div class="card-body">

        <form id='model-form' action="{:url('user/update', ['id' => $user->id])}" method="POST" accept-charset="UTF-8">
          <input type="hidden" name="_method" value="PUT">
          {:token()}

          <div class="form-group">
            <label for="name-field">用户名</label>
            <input class="form-control" type="text" name="name" id="name-field" value="{$user->name}" />
          </div>
          <div class="form-group">
            <label for="introduction-field">个人简介</label>
            <textarea name="introduction" id="introduction-field" class="form-control" rows="3">{$user->introduction|default=''}</textarea>
          </div>
          <div class="form-group mb-4">
            <label for="" class="avatar-label">用户头像</label>
            {:create_upload_image("avatar", 100, 100, $user->avatar)}
          </div>
          <div class="well well-sm">
            <button type="submit" class="btn btn-primary">保存</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
{/block}
{block name="scripts"}
<script src="/static/plugins/jquery-validation/jquery.validate.min.js"></script>
<script src="/static/plugins/jquery-validation/bootstrap.validate.js"></script>
<script type="text/javascript">
    jQuery(function($){
        $("form#model-form").validate({
            rules:{
                "name":{
                    required: true,
                    minlength: 2,
                    maxlength: 20
                }, "introduction":{
                    maxlength: 100
                }
            },
            messages:{
                "name":{
                    required: "用户名不能为空",
                    minlength: "用户名长度必须在2-20个字符之间",
                    maxlength: "用户名长度必须在2-20个字符之间"
                }, "introduction":{
                    maxlength: "个人介绍信息不能超过100个字符"
                }
            },
            highlight:function(element) {
                $(element).parents('.form-group').addClass('has-error');
            },
            unhighlight: function(element) {
                $(element).parents('.form-group').removeClass('has-error');
            },
            submitHandler: function(form){
                var $form = $(form);
                $.ajax({
                    url: $form.attr("action"),
                    type: $form.attr("method"),
                    dataType: "JSON",
                    data: $form.serialize(),
                    success: function(data){
                        if(data.code){
                            location.href = data["url"];
                        }else{
                            alert(data["msg"]);
                        }
                    }, error: function () {
                        alert("数据执行错误！");
                    }
                });
            }
        });
    });
</script>
{/block}